<template>
	<view class="addressmode">
		<view class="addressmode_content">
			<u--form labelPosition="left" labelWidth="134upx" :rules="rules" :model="value" ref="form">
				<u-form-item label="收货人" prop="name" borderBottom>
					<u--input placeholder="请输入" v-model="value.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="收货号码" prop="phone" borderBottom>
					<u--input type="number" placeholder="请输入" v-model="value.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item label="所在地区" prop="area" borderBottom>
					<areamode @change="diqu" v-model="value"></areamode>
				</u-form-item>
				<u-form-item label="详细地址" prop="addressDetail" borderBottom>
					<u--textarea class="u-textarea" v-model="value.addressDetail" placeholder="例如 X区XX街道XX小区X-X-XXX"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<u--form labelPosition="left" labelWidth="236upx" :model="value">
			<u-form-item class="switch_label" label="设置为默认地址">
				<u-switch v-model="value.areDefault" activeColor="#FFC455"></u-switch>
			</u-form-item>
		</u--form>
		<button :disabled="buttonloading" @click="confirmClick" class="addressmode_button">
			保存并使用
		</button>
	</view>
</template>

<script>
	import areamode from './areamode.vue'
	export default {
		components: {
			areamode
		},
		props: {
			value: {
				default: {}
			},
			confirm: {}
		},
		data() {
			return {
				buttonloading: false,
				form: this.value || {},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请输入收货号码',
						trigger: ['blur', 'change']
					}],
					area: [{
						required: true,
						message: '请选择地区',
						trigger: ['change']
					}],
					addressDetail: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		methods: {
			diqu() {
				this.$refs.form.validateField('area');
			},
			confirmClick() {
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!reg_tel.test(this.value.phone)) {
					uni.showToast({
						title: "请输入正确手机号",
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.$forceUpdate()
				this.$refs.form.validate().then(res => {
					if (this.confirm) {
						this.buttonloading = true
						this.confirm(this.value).then(res => {
							console.log(res)
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
							if (res.success == 1) {
								uni.navigateBack();
							}
						}).finally(() => {
							this.buttonloading = false
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addressmode {
		padding: 0 20upx;

		.addressmode_content {
			padding: 30upx;
			background-color: #FFFFFF;
			margin-top: 20upx;
			border-radius: 13px;

			.u-textarea {
				width: 100%;
				padding: 0;
				/deep/ .u-textarea__field {
					width: 100%;
				}
			}
		}

		/deep/ .u-form-item__body__left {
			align-items: flex-start;
		}

		/deep/ .u-textarea {
			border: none;
		}

		.switch_label {
			/deep/ .u-form-item__body__left {
				align-items: center;
			}

			/deep/ .u-form-item__body__left__content__label {
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.3);
				line-height: 40upx;
			}
		}

		/deep/ .u-form-item {
			&:last-child {
				.u-line {
					display: none;
				}
			}
		}

		.addressmode_button {
			position: fixed;
			bottom: 38upx;
			left: 50%;
			transform: translate(-50%);
			width: 488upx;
			height: 82upx;
			background: #FFBE53;
			border-radius: 42upx;
			font-size: 34upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.84);
			line-height: 48upx;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				content: '';
				display: none;

			}
			&[disabled]{
				background-color: #c1c1c1;
				
			}
		}
	}
</style>
<style>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
</style>
